<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数据看板</title>
    <link href="../img/icon.ico" rel="shortcut icon" />
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <link rel="stylesheet" href="../css/element.min.css?1" />
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_5bb2ydgeqs.css">
    <link rel="stylesheet" href="../css/reset.css?3123">
    <link rel="stylesheet" href="../css/setlayui.css?12">
    <link rel="stylesheet" href="../css/viewer.min.css">
    <link rel="stylesheet" href="../css/iconfont.css">
    <script src="../layui/layui.all.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/vue.min.js"></script>
    <script type="text/javascript" src="../js/element.min.js"></script>
    <script src="../js/viewer.min.js"></script>
    <style>
        .risk-manage-container {
            position: relative;
            width: 100%;
            height: 100%;
            padding: 6.4vh 0px 0px 0px;
            box-sizing: border-box;
        }
        
        .risk-manage-tab {
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            align-items: center;
            width: 100%;
            height: 6.4vh;
            padding: 0 0.83vw;
            border-bottom: 1px solid #EDEDED;
            box-sizing: border-box;
        }
        
        .risk-manage-tab-item {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 4.47vw;
            height: 3.2vh;
            border: 1px solid #556FD7;
            border-radius: 0.26vw;
            box-sizing: border-box;
            margin-right: 1.04vw;
            font-size: 0.72vw;
            color: #556FD7;
            cursor: pointer;
        }
        
        .risk-manage-tab-item.active {
            background-color: #556FD7;
            color: #fff;
        }
        
        .risk-manage-content {
            width: 100%;
            height: 100%;
            padding: 1.6vh 0.83vw;
            box-sizing: border-box;
        }
        
        .risk-inter-container {
            position: relative;
            width: 100%;
            height: 100%;
            padding-left: 5.31vw;
            box-sizing: border-box;
        }
        
        .risk-inter-menu {
            position: absolute;
            left: 0;
            top: 0;
            width: 4.47vw;
            height: 100%;
            overflow-y: auto;
            /* margin-right: 16px;  */
        }
        
        .risk-inter-menu-item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 4.47vw;
            height: 4.47vw;
            box-sizing: border-box;
            margin-bottom: 2vh;
            border-radius: 0.52vw;
            background-color: #F1F2FC;
            color: #5574D7;
            font-size: 0.72vw;
            cursor: pointer;
        }
        
        .risk-inter-menu-item.active {
            background-color: #556FD7;
            color: #FFFFFF;
        }
        
        .risk-inter-menu-item-icon {
            font-size: 1.45vw;
            margin-bottom: 1vh;
        }
        
        .risk-inter-content {
            width: 100%;
            height: 100%;
            border: 1px solid #EBEBEB;
            box-sizing: border-box;
        }
        
        .risk-inter-tower {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            padding: 0 0.83vw;
            box-sizing: border-box;
        }
        
        .risk-inter-condition {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            padding: 2vh 0;
            font-size: 0.72vw;
            color: #333333;
        }
        
        .risk-inter-condition-element {
            margin-bottom: 2vh;
        }
        
        .risk-inter-condition-element-height {
            display: flex;
            align-items: center;
            height: 3.2vh;
            box-sizing: border-box;
        }
        
        .risk-inter-condition-element-left {
            margin-left: 1.5625vw;
        }
        
        .risk-inter-condition-element-right {
            margin-right: 0.52vw;
        }
        
        .tower-number-item {
            display: flex;
            align-items: center;
            height: 3.2vh;
            padding: 0 0.72vw;
            background: #FAFBFC;
            border: 1px solid #BBBBC5;
            border-radius: 0.26vw;
            margin-right: 1.04vw;
            box-sizing: border-box;
            font-size: 0.72vw;
            color: #333333;
            cursor: pointer;
        }
        
        .tower-number-item-dot {
            width: 0.52vw;
            height: 0.52vw;
            border-radius: 50%;
            margin-right: 0.3125vw;
            background-color: #F70505;
        }
        
        .risk-inter-page {
            display: flex;
            justify-content: center;
            width: 100%;
            padding: 3vh 0;
        }
        
        .risk-inter-table {
            width: 100%;
            flex: 1;
        }
    </style>
</head>

<body>
    <div id="app" class="container" style="display: none; width: 100%; height: 100%;" v-show="isAppShow">
        <div class="risk-manage-container">
            <div class="risk-manage-tab">
                <div class="risk-manage-tab-item" v-for="item in riskManageTabList" :key="item.idx" :class="[riskManageTabIndex === item.idx ? 'active' : '']" @click="changeRiskManageTabIndex(item.idx)">{{item.name}}</div>
            </div>
            <div class="risk-manage-content">
                <div class="risk-inter-container" v-if="riskManageTabIndex === 2">
                    <div class="risk-inter-menu">
                        <div class="risk-inter-menu-item" v-for="item in riskInterMenuList" :key="item.idx" :class="[riskInterMenuIndex === item.idx ? 'active' : '']" @click="changeRiskInterMenuIndex(item.idx)">
                            <span class="iconfont risk-inter-menu-item-icon" :class="item.icon"></span>
                            <span>{{item.name}}</span>
                        </div>
                    </div>
                    <div class="risk-inter-content">
                        <!--风险管控-物联网-吊塔-->
                        <div class="risk-inter-tower" v-if="riskInterMenuIndex === 1">
                            <div class="risk-inter-condition">
                                <div class="risk-inter-condition-element risk-inter-condition-element-right risk-inter-condition-element-height">
                                    违规选择</div>
                                <el-select v-model="riskInterTowerFilterValue" clearable placeholder="请选择" size="small" class="risk-inter-condition-element">
                                    <el-option v-for="item in 4" label="1" value="">
                                    </el-option>
                                </el-select>
                                <div class="risk-inter-condition-element risk-inter-condition-element-right risk-inter-condition-element-left risk-inter-condition-element-height">
                                    起止时间</div>
                                <el-date-picker v-model="riskInterTowerSelectDate" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="small" class="risk-inter-condition-element">
                                </el-date-picker>
                                <div class="risk-inter-condition-element risk-inter-condition-element-right risk-inter-condition-element-left risk-inter-condition-element-height">
                                    塔吊序号</div>
                                <div class="tower-number-item">
                                    <div class="tower-number-item-dot"></div>
                                    <div>几号塔吊</div>
                                </div>
                                <div class="tower-number-item">
                                    <div class="tower-number-item-dot"></div>
                                    <div>几号塔吊</div>
                                </div>
                                <div class="tower-number-item">
                                    <div class="tower-number-item-dot"></div>
                                    <div>几号塔吊</div>
                                </div>
                                <div class="tower-number-item">
                                    <div class="tower-number-item-dot"></div>
                                    <div>几号塔吊</div>
                                </div>
                            </div>

                            <div class="risk-inter-table">
                                <el-table :data="riskInterTowerList" stripe style="width: 100%" border height="100%">
                                    <el-table-column prop="date" label="项目名称" width="180">
                                    </el-table-column>
                                    <el-table-column prop="name" label="设备编号" width="180">
                                    </el-table-column>
                                    <el-table-column prop="address" label="传感器编号" show-overflow-tooltip>
                                    </el-table-column>
                                    <el-table-column prop="address" label="传感器名称" show-overflow-tooltip>
                                    </el-table-column>
                                    <el-table-column prop="address" label="传感器序号" show-overflow-tooltip>
                                    </el-table-column>
                                    <el-table-column prop="address" label="当前时间" show-overflow-tooltip>
                                    </el-table-column>
                                    <el-table-column prop="address" label="传感器数值" show-overflow-tooltip>
                                    </el-table-column>
                                    <el-table-column prop="address" label="最大阀值" show-overflow-tooltip>
                                    </el-table-column>
                                    <el-table-column prop="address" label="最小阈值" show-overflow-tooltip>
                                    </el-table-column>
                                </el-table>
                            </div>

                            <div class="risk-inter-page">
                                <el-pagination @size-change="riskInterTowerPageSizeChange" @current-change="riskInterTowerPageIndexChange" :current-page="riskInterTowerPageIndex" :page-sizes="[20, 40, 60, 80]" :page-size="riskInterTowerPageSize" layout="total, sizes, prev, pager, next, jumper"
                                    :total="riskInterTowerTotal">
                                </el-pagination>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>


    <script src="../js/public.js?1234"></script>
    <script>
        var layer = layui.layer;
        var vm = new Vue({
            el: '#app',
            data: function() {
                return {
                    isAppShow: false,
                    // 风险管控tab列表
                    riskManageTabList: [{
                        name: "材料超差",
                        idx: 0
                    }, {
                        name: "质量安全",
                        idx: 1
                    }, {
                        name: "物联网",
                        idx: 2
                    }],
                    riskManageTabIndex: 2,
                    // 风险管控物联网菜单
                    riskInterMenuList: [{
                        name: "行为识别",
                        icon: "iconzu41563",
                        idx: 0
                    }, {
                        name: "吊塔",
                        icon: "iconICON-tadiaojiance",
                        idx: 1
                    }, {
                        name: "升降机",
                        icon: "iconshengjiangji1",
                        idx: 2
                    }, {
                        name: "安全帽",
                        icon: "iconzu41563",
                        idx: 3
                    }, {
                        name: "扬尘设备",
                        icon: "icon208yangchenshebei2",
                        idx: 4
                    }, {
                        name: "临边监测",
                        icon: "iconjiance",
                        idx: 5
                    }],
                    riskInterMenuIndex: 0,
                    // 风险管控 互联网 塔吊
                    riskInterTowerPageIndex: 0,
                    riskInterTowerPageSize: 20,
                    riskInterTowerTotal: 90,
                    riskInterTowerFilterValue: "",
                    riskInterTowerSelectDate: "",
                    riskInterTowerList: []
                }
            },

            mounted: function() {
                this.isAppShow = true;

            },

            methods: {
                // 风险管控
                changeRiskManageTabIndex(index) {
                    index = parseInt(index);
                    if (this.riskManageTabIndex === index) {
                        return
                    }
                    this.riskManageTabIndex = index;
                },
                // 风险管控 物联网
                changeRiskInterMenuIndex(index) {
                    index = parseInt(index);
                    if (this.riskInterMenuIndex === index) {
                        return
                    }
                    this.riskInterMenuIndex = index;
                },

                // 风险管控 物联网 塔吊
                riskInterTowerPageIndexChange(val) {
                    console.log(val)
                },

                riskInterTowerPageSizeChange(val) {
                    console.log(val)
                }

            }


        })
    </script>
</body>

</html>